<template>
    <n-page-header subtitle="让你的听觉更懂视觉" >
        <n-grid :cols="5">
            <n-gi>
                <n-statistic label="正片" value="125 集" />
            </n-gi>
            <n-gi>
                <n-statistic label="嘉宾" value="22 位" />
            </n-gi>
            <n-gi>
                <n-statistic label="道歉" value="36 次" />
            </n-gi>
            <n-gi>
                <n-statistic label="话题" value="83 个" />
            </n-gi>
            <n-gi>
                <n-statistic label="参考链接" value="2,346 个" />
            </n-gi>
        </n-grid>
        <template #title>
            <a href="https://anyway.fm/" style="text-decoration: none; color: inherit">Anyway.FM</a>
        </template>
        <template #header>
            <n-breadcrumb>
                <n-breadcrumb-item>播客</n-breadcrumb-item>
                <n-breadcrumb-item>精选</n-breadcrumb-item>
                <n-breadcrumb-item>超级精选</n-breadcrumb-item>
                <n-breadcrumb-item>Anyway.FM</n-breadcrumb-item>
            </n-breadcrumb>
        </template>
        <template #avatar>
            <n-avatar src="https://cdnimg103.lizhi.fm/user/2017/02/04/2583325032200238082_160x160.jpg" />
        </template>
        <template #extra>
            <n-space>
                <n-button>催更</n-button>
                <n-dropdown :options="options" placement="bottom-start">
                    <n-button :bordered="false" style="padding: 0 4px"> ··· </n-button>
                </n-dropdown>
            </n-space>
        </template>
        <template #footer> 截止到 2021 年 4 月 3 日 </template>
    </n-page-header>
    <br/>
    <n-carousel
        effect="card"
        prev-slide-style="transform: translateX(-150%) translateZ(-800px);"
        next-slide-style="transform: translateX(50%) translateZ(-800px);"
        style="height: 240px"
        :show-dots="false"
    >
        <n-carousel-item :style="{ width: '60%' }">
            <img class="carousel-img" src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg" />
        </n-carousel-item>
        <n-carousel-item :style="{ width: '60%' }">
            <img class="carousel-img" src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg" />
        </n-carousel-item>
        <n-carousel-item :style="{ width: '60%' }">
            <img class="carousel-img" src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg" />
        </n-carousel-item>
        <n-carousel-item :style="{ width: '60%' }">
            <img class="carousel-img" src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg" />
        </n-carousel-item>
    </n-carousel>
    <br/>
    <n-card title="📖 如何成功" embedded :bordered="false">
        如果你年轻的时候不 996，你什么时候可以 996？你一辈子没有
        996，你觉得你就很骄傲了？这个世界上，我们每一个人都希望成功，都希望美好生活，都希望被尊重，我请问大家，你不付出超越别人的努力和时间，你怎么能够实现你想要的成功？
    </n-card>
    <br/>
    <n-card title="📖 如何成功" embedded :bordered="false">
        如果你年轻的时候不 996，你什么时候可以 996？你一辈子没有
        996，你觉得你就很骄傲了？这个世界上，我们每一个人都希望成功，都希望美好生活，都希望被尊重，我请问大家，你不付出超越别人的努力和时间，你怎么能够实现你想要的成功？
    </n-card>
</template>

<script setup lang="ts">
    const options = [
        {
            label: "催更",
            key: "1"
        },
        {
            label: "催更",
            key: "2"
        },
        {
            label: "催更",
            key: "3"
        }
    ];
</script>
<style scoped>
    .carousel-img {
        margin: 0 auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>
